<template>
  <el-dialog v-model="openSelDialog"
             :before-close="handleClose"
             title="选择库位"
             draggable
             width="1000px"
             append-to-body
  >

    <el-form :inline="true" :model="queryParams" label-width="80px">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="6">
          <el-form-item label="库位编码">
            <el-input v-model="queryParams.locationCode" placeholder="库位编码" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="库位位置">
            <el-input v-model="queryParams.locationName" placeholder="库位位置" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="货架号">
            <el-input v-model="queryParams.rackNo" @input="saveParams.rackNo=limitCharAndNumber(saveParams.rackNo)" placeholder="货架号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>

    <vxe-table
        ref="tableRef"
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        height="300"
        :checkbox-config="{ trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="60" title="序号"></vxe-column>
      <vxe-column field="locationCode" width="220" title="库位编码"/>
      <vxe-column field="locationName" width="220" title="库位位置"/>
      <vxe-column field="rackNo" width="150" title="货架号"/>
      <vxe-column field="warehouseName" width="150" title="仓库"/>
      <vxe-column field="areaName" width="150" title="库区"/>
    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
    <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="clickSave"> 确定 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
    </template>

  </el-dialog>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import {getLocationList, locationInventoryGetSkuList} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {limitCharAndNumber} from "@/utils/shuangcheng";

const {proxy} = getCurrentInstance()
const props = defineProps({
  openSelDialog: {
    type: Boolean,
    default: false
  },
  filterData: {type: Array},//已选择的数据
  companyId:{type:String},
  warehouseId:{type:String},
})
let total = ref(0)
let queryParams = ref({
  code: '',
  name: '',
  pageNum: 1,
  pageSize: 10,
})
let tableList = ref([])
const emits = defineEmits(['closeSelDialog'])

function handleClose() {
  emits('closeSelDialog')
}

function getList() {
  queryParams.value.status=0
  queryParams.value.companyId =props.companyId
  queryParams.value.warehouseId =props.warehouseId
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }
  getLocationList(params).then(res => {
    total.value = res.total
    let a = res.data
    let b = props.filterData
    //过滤已经选择的数据
    if(b){
      let filtered = a.filter(obj => !b.some(bObj => bObj.locationId === obj.locationId));
      tableList.value = filtered
    }else{
      tableList.value =a
    }
  })

}

function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList()
}

onMounted(() => {
  getList()
})

function clickSave() {
  const $table = proxy.$refs.tableRef
  if ($table) {
    let selectRecords = $table.getCheckboxRecords()
    emits('closeSelDialog', selectRecords)
  }
}

</script>

<style scoped lang="scss">

</style>